var html = `
  <style>
  .business-dialog .el-dialog__wrapper .el-dialog__body .el-form .agreement {
    margin-bottom: 0;
  }

  .business-dialog .el-dialog__wrapper .el-dialog__body .el-form .name {
    display: inline-flex;
  }

  .business-dialog .el-dialog__wrapper .el-dialog__body .el-form .name .el-form-item__content {
    margin-left: 0 !important;
  }

  .business-dialog .el-dialog__wrapper .el-dialog__body .el-form .sex {
    display: inline-flex;
  }

  .business-dialog .el-dialog__wrapper .el-dialog__body .el-form .sex .el-form-item__content {
    margin-left: 30px !important;
  }

  .business-dialog .el-dialog__wrapper .el-dialog__body .el-form .mobile {
    position: relative;
  }

   .business-dialog .el-dialog__wrapper .el-dialog__body .el-form .mobile .mobile-copy {
     position: absolute;
     left: 0;
     top: 0;
   }

  .business-dialog .el-dialog__wrapper .el-dialog__body .el-form .tip {
    position: absolute;
    font-size: 12px;
    top: 43px;
    background-color: #fff;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
    border: 1px solid #dcdfe6;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 9999;
    padding: 0 8px;
    border-radius: 4px;
    cursor: pointer;
    /*width: 100%;*/
  }



  .business-dialog .el-dialog__wrapper .el-dialog__body .el-form .agreement .el-form-item__content {
    line-height: 24px;
  }

   .business-dialog .el-radio-group .el-radio-button__inner {
      /*border: 1px solid #b3d8ff;*/
      border: 1px solid #dcdfe6;
      margin-right: 10px;
      border-radius: 4px;
      box-shadow: none;
  }

  .business-dialog .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: #fff;
    color: #409EFF;
    border: 1px solid #409EFF;
  }
  </style>
  <div id="business" class="business">
    <div class="business-dialog">
    <el-dialog
      title="商务合作"
      :visible.sync="businessDialogVisible"
      width="600px"
      center
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form :model="form" ref="form" label-width="80px" :rules="rules">
        <el-form-item label="咨询意向" prop="content" key="content">
          <el-radio-group v-model="form.content">
            <el-radio-button :label="item.name" v-for="(item, index) in businessExample" :key="index"></el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="昵称" prop="name" key="name" class="name">
          <el-input placeholder="请输入昵称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="" prop="sex" key="sex" class="sex">
          <el-radio-group v-model="form.sex">
            <el-radio :label="1">先生</el-radio>
            <el-radio :label="2">女士</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系方式" prop="mobile" key="mobile" class="mobile">
          <el-input ref="mobile" v-model="form.mobile" @focus="mobileFocus" @blur="mobileBlur"></el-input>
          <el-input v-model="mobileCopy" v-if="mobileCopyShow" class="mobile-copy" @focus="mobileCopyFocus"></el-input>
          <div v-if="mobileTipShow" class="tip" @click="mobileSet">选择您已注册的手机号：{{mobileCopy}}</div>
        </el-form-item>
        <el-form-item key="sms_code" v-if="form.mobile != options.mobile" label="验证码" prop="sms_code" :rules="[
         { required: true, message: '请输入验证码', trigger: 'blur' },
         { min: 6, max: 6, message: '请输入正确的验证码', trigger: 'blur' }
        ]">
          <el-input placeholder="6位验证码" v-model="form.sms_code">
            <template slot="append" v-if="smsCodeDisabled === true"><span>{{timeNum}}s重新获取</span></template>
            <template slot="append" v-else><span @click="smsCode" style="cursor: pointer; color: #1890ff">发送短信验证码</span></template>
          </el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 0">
          <el-checkbox v-model="checked">勾选并同意</el-checkbox>
          <span @click="jump" style="color: #1890ff; cursor: pointer">
            《隐私协议》
          </span>
        </el-form-item>
        <el-form-item class="agreement">
          <el-checkbox v-model="checked2">
            同意将联系方式推送给相关商家进行售前服务
          </el-checkbox>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </el-dialog>
  </div>
</div>`;
var origin = "https://im.w7.cc";
// var origin = "https://im.we7888.cn"; //
var Business = (function() {
  function initDom(options) {
    new Vue({
      el: "#business",
      data: function() {
        return {
          mobile: options && options.mobile + "",
          mobileCopy: options && options.mobile + "",
          mobileTipShow: false,
          mobileCopyShow: false,
          form: {
            content: "",
            channel: options && options.channel,
            name: "",
            sex: 1,
            sms_code: "",
            mobile: "", // options && options.mobile + "",
            source: (options && options.source) || document.title,
            shop_uid: options && options.shop_uid,
            user_uid: options && options.user_uid,
            url: location.href
          },
          rules: {
            content: [
              {
                required: true,
                message: "请先选择您的咨询意向",
                trigger: "change"
              }
            ],
            sex: [{ required: true, message: "请选择", trigger: "change" }],
            name: [
              {
                required: true,
                message: "请输入昵称",
                trigger: "blur"
              },
              {
                // pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
                pattern:
                  /^[\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$]+$/,
                message: "昵称格式不正确",
                trigger: "blur"
              }
            ],
            mobile: [
              {
                required: true,
                message: "请输入手机号",
                trigger: ["blur", "change"]
              },
              {
                pattern: /^1([0-9])\d{9}$/,
                message: "请输入正确的手机号",
                trigger: "blur"
              }
            ]
          },
          businessAgreement: "",
          checked: false,
          checked2: false,
          businessDialogVisible: false,
          remoteUid: undefined,
          businessExample: [],
          smsCodeDisabled: false,
          timer: null,
          timeNum: 120
        };
      },
      computed: {
        options() {
          return options;
        }
      },
      created() {
        this.createElement();
        this.chanceCheckRepeat(options);
        this.getBusinessExample();
      },
      mounted() {
      },
      methods: {
        chanceCheckRepeat(options) {
          axios({
            url: origin + "/frontend/business/chance/checkRepeat",
            data: {
              user_uid: options && options.user_uid,
              url: location.href
            },
            method: "post"
          })
            .then((res) => {
              // console.log("res");
              // console.log(res);
              if (res.status === 200) {
                this.businessDialogVisible = true;
              }
            })
            .catch((error) => {
              this.$message.closeAll();
              this.$message.error(error.response.data.error);
            });
        },
        createElement() {
          this.mobileCopy =
            this.mobile.substr(0, 3) + "****" + this.mobile.substr(7);
          console.log(this.mobile);
          var removeElement = document.getElementById("businessWrap");
          removeElement && removeElement.remove();
          var htmlElement = document.createElement("div");
          htmlElement.id = "businessWrap";
          htmlElement.innerHTML = html;
          document.body.appendChild(htmlElement);
          this.timer && clearInterval(this.timer);
        },
        getBusinessExample() {
          axios({
            url: origin + "/frontend/business/example",
            params: {},
            method: "get"
          }).then((res) => {
            // console.log("res");
            // console.log(res);
            if (res.status === 200) {
              this.businessExample = res.data.data;
              // this.form.content = res.data.data[0].name;
            }
          });
        },
        smsCode() {
          axios({
            url: origin + "/frontend/business/chance/sendSms",
            data: {
              mobile: this.form.mobile
            },
            method: "post"
            // headers: {
            //   "Content-Type":
            //     "application/x-www-form-urlencoded; charset=UTF-8",
            // },
          })
            .then((res) => {
              // console.log("res");
              // console.log(res);
              if (res.status === 200) {
                this.smsCodeDisabled = true;
                this.timer = setInterval(() => {
                  if (this.timeNum > 1) {
                    this.timeNum--;
                  } else {
                    this.timeNum = 120;
                    this.smsCodeDisabled = false;
                  }
                }, 1000);
              }
            })
            .catch((error) => {
              this.$message.closeAll();
              this.$message.error(error.response.data.error);
            });
        },
        handleClose() {
          this.businessDialogVisible = false;
        },
        jump() {
          window.open("https://wiki.w7.com/chapter/1249?id=3396");
        },
        submit() {
          this.$refs.form.validate((valid) => {
            if (valid) {
              if (this.checked && this.checked2) {
                axios({
                  // headers: {
                  //   "Content-Type":
                  //     "application/x-www-form-urlencoded; charset=UTF-8",
                  // },
                  url: origin + "/frontend/business/chance",
                  data: this.form,
                  method: "post"
                })
                  .then(() => {
                    this.$message.closeAll();
                    this.$message.success("提交成功");
                    this.businessDialogVisible = false;
                  })
                  .catch((error) => {
                    this.$message.closeAll();
                    this.$message.error(error.response.data.error);
                  });
              } else {
                this.$message.closeAll();
                this.$message.error("请勾选并同意相关协议！");
              }
            } else {
              return false;
            }
          });
        },
        agree() {
          this.checked = true;
        },
        mobileFocus() {
          if (options.user_uid) {
            this.mobileTipShow = true;
          }
        },
        mobileBlur() {
          setTimeout(() => {
            this.mobileTipShow = false;
          }, 500);
        },
        mobileSet() {
          this.mobileCopyShow = true;
          this.form.mobile = this.mobile;
          this.mobileTipShow = false;
          console.log(this.form.mobile);
        },
        mobileCopyFocus() {
          this.mobileCopyShow = false;
          this.form.mobile = this.mobileCopy;
          this.$refs.mobile.focus();
        }
      }
    });
  }

  return {
    initDom,
    init: function(options) {
      this.initDom(options);
    }
  };
})();
